import { formatBytes, formatDate, formattingTime } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Col, Descriptions, Row } from 'antd';
import { useEffect } from 'react';

export default function Page() {
  let { data, refresh, loading } = useRequest("/api/monitor/server")
  useEffect(() => {
    let id = setInterval(() => refresh(), 2000)
    return () => {
      clearInterval(id)
    }
  }, [refresh])
  return (
    <PageContainer loading={loading && data}>
      <Row gutter={32}>
        <Col span={24} md={12}>
          <Descriptions title="CPU" bordered >
            <Descriptions.Item label="核心数">{data?.cpu.core_num}</Descriptions.Item>
            <Descriptions.Item label="使用率">{data?.cpu.usage.toFixed(2)}%</Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={24} md={12}>
          <Descriptions title="内存" bordered >
            <Descriptions.Item label="总内存">{formatBytes(data?.memory.total)}</Descriptions.Item>
            <Descriptions.Item label="已用内存">{formatBytes(data?.memory.used)}</Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
      <Descriptions title="服务器信息" bordered style={{ paddingTop: 32 }} >
        <Descriptions.Item label="服务器名称">{data?.system.host_name}</Descriptions.Item>
        <Descriptions.Item label="操作系统">{data?.system.os}</Descriptions.Item>
        <Descriptions.Item label="系统架构">{data?.system.arch}</Descriptions.Item>
      </Descriptions>
      <Descriptions title="AneAdmin" bordered style={{ paddingTop: 32 }}>
        <Descriptions.Item label="启动时间">{formatDate(data?.app.start_time * 1000)}</Descriptions.Item>
        <Descriptions.Item label="运行时长">{formattingTime(data?.app.run_time)}</Descriptions.Item>
        <Descriptions.Item label="内存使用">{formatBytes(data?.app.memory)}</Descriptions.Item>
        <Descriptions.Item label="CPU使用">{data?.app.cpu.toFixed(2)}%</Descriptions.Item>
      </Descriptions>
    </PageContainer>

  );
}
